<template>
    <div class="box">
        <!-- 导航栏 -->
        <navlist title="商品列表"></navlist>
        <!-- 商品列表的渲染 -->
        <van-card :num="v.goods_number" :price="v.goods_price" :title="v.goods_name" v-for="(v, i) in list"
            @click="toDetail(v.goods_id)"
            :thumb="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
    </div>
</template>

<script setup>
import { ref } from "vue"

import navlist from '@/components/navlist.vue';

import { searchApi } from "@/api/api";

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

let list = ref({})
const searchList = () => {
    searchApi().then((res) => {
        console.log(res)
        list.value = res.data.message.goods
    })
}
searchList()

// 跳转到详情
const toDetail = (id) => {
    router.push({path:'/detail',query:{goods_id:id}})
}



</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>